```svelte
<script lang="ts">
  import { normalizeProps, useMachine } from "@zag-js/svelte"
  import * as splitter from "@zag-js/splitter"

  const id = $props.id()
  const service = useMachine(splitter.machine, {
    id,
    defaultSize: [80, 20],
    panels: [
      { id: "a", minSize: 10 },
      { id: "b", minSize: 10 },
    ],
  })
  const api = $derived(splitter.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div {...api.getPanelProps({ id: "a" })}>
    <p>A</p>
  </div>
  <div {...api.getResizeTriggerProps({ id: "a:b" })}></div>
  <div {...api.getPanelProps({ id: "b" })}>
    <p>B</p>
  </div>
</div>
```
